<template>
  <div>
    <div class="headerNavCon" ref="navTitleCon">
      <div :class="['navTitleCon', isTop ? 'navTop' : '' ]">
        <span :class="['navItem', navIndex === index ? 'active' : '']"
              v-for="(item, index) in cateArr"
              :key="item.favorites_id" @click="changeNav(index)">
        {{item.favorites_title}}
      </span>
        <div class="goTopBox">
          <span class="el-icon-upload2 goTop" @click="goTop"></span>
        </div>
      </div>
    </div>

    <div class="infoContainer">
      <h1 class="workTitle">{{favoritesTitle | favoTitle}}</h1>

      <div class="infoCon">
        <div class="infoItemBox" v-for="(item, index) in categoryArr" :key="item.category_id + '' + index">
          <div class="infoItem">
            <div class="imgBox" @mouseenter="imgMouseEnter(index)" @mouseleave="imgMouseLeave(index)">
              <img class="img" :src="item.pict_url" alt="商品图片">
              <div v-show="qrcodeIndex === index" class="qrcode" :ref="'qrcode_'+index"></div>
            </div>
            <span class="coupon" v-if="item.coupon_info">{{item.coupon_info}}</span>

            <a target="_blank" :href="item.coupon_click_url" class="titleTxt">{{item.title}}</a>

            <div class="btnBox">
              <a class="buyBtn" target="_blank" :href="item.coupon_click_url" v-if="item.coupon_click_url">领劵购买</a>
              <span class="price">{{item.coupon_click_url ? '原价：'+item.zk_final_price+'￥' : '晚了，无优惠券'}}</span>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {mapMutations} from "vuex";
  export default {
    name: "index",
    data(){
      return {
        timeId : null,
        navIndex: 0,
        isTop: false,  // 是否滚动到nav,固定nav

        qrcodeIndex: -1,  // 显示二维码

      }
    },

    filters: {
      favoTitle(value){
        let arr = value.split('');
        return arr.join(' / ')
      }
    },

    // 异步业务逻辑, 读取服务端数据，返回给组件
    async asyncData({$axios}){

      let res = await $axios({
        url: '/api/recommend/categories'
      });
      let cateArr, categoryArr = [];
      let favoritesTitle = '';

      if (res.code === 10000) {
        cateArr = res.data;
        favoritesTitle = cateArr[0].favorites_title

        let categoryId = cateArr[0].favorites_id;
        let res2 = await $axios('/api/recommend/'+categoryId);
        if (res2.code === 10000) {
          categoryArr = res2.data.tbk_dg_optimus_material_response.result_list.map_data
        }
      }

      return {
        cateArr: cateArr,
        categoryArr: categoryArr,
        favoritesTitle: favoritesTitle
      }
    },

    mounted(){
      window.addEventListener('scroll', this.pageMoveHeight);
      this.changeLogoNavIndex(0)
    },

    destroyed(){
      window.removeEventListener('scroll', this.pageMoveHeight);
      clearInterval(this.timeId)
    },

    methods: {
      imgMouseLeave(index){
        let qrcode = this.$refs['qrcode_' + index];
        qrcode[0].innerHTML = '';
        this.qrcodeIndex = -1;
      },

      imgMouseEnter(index){
        let {categoryArr} = this;

        if(!categoryArr[index].coupon_click_url) return;

        this.qrcodeIndex = index;
        let qrcode = this.$refs['qrcode_' + index];
        let qrCodeObj = new QRCode(qrcode[0], {
          text: '正在生成二维码...',
          width: 200,
          height: 200,
          colorDark : "#000000",
          colorLight : "#fff",
          correctLevel : QRCode.CorrectLevel.H
        });

        qrCodeObj.makeCode('https:' + categoryArr[index].coupon_click_url)
      },

      ...mapMutations({
        changeLogoNavIndex: "changeNav"
      }),

      // 页面移动的高度，是否到nav
      pageMoveHeight(){
        let top = this.$refs.navTitleCon.offsetTop;
        let scrollY = window.scrollY;
        this.isTop = scrollY >= top;
      },

      // 滚动到顶部
      goTop(){
        clearInterval(this.timeId);
        this.timeId = setInterval(()=>{
          let top = document.body.scrollTop || document.documentElement.scrollTop;
          if (top>0) {
            document.body.scrollTop = document.documentElement.scrollTop -= 30;
          } else {
            clearInterval(this.timeId);
          }
        }, 1)

      },


      async changeNav(index){
        let {cateArr} = this;
        this.navIndex = index;

        const loading = this.$loading({
          lock: true,
          text: 'loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        });

        this.favoritesTitle = cateArr[index].favorites_title;

        let categoryId = cateArr[index].favorites_id;
        let res = await this.$axios('/api/recommend/' + categoryId);
        loading.close();  // 关闭loading
        if (res.code === 10000) {
          this.categoryArr = res.data.tbk_dg_optimus_material_response.result_list.map_data
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .headerNavCon{
    height: 60px;
    margin-top: 10px;

    .navTitleCon{
      display: flex;
      align-items: center;
      box-shadow: 0 2px 2px #ddd;
      background-color: #fff;

      &.navTop{
        position: fixed;
        top: 0;
        z-index: 1000;
        width: 1170px
      }

      .navItem{
        padding: 10px 0;
        margin: 0 10px;
        color: #999
      }
      .active{
        color: red;
        border-bottom: 2px solid red;
      }

      .goTopBox{
        flex: 1;
        display: flex;
        justify-content: flex-end;

        .goTop{
          border: 1px solid #aaa;
          width: 26px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          border-radius: 50%;
          font-size: 20px;
          color: #666;
          font-weight: 900;
          margin-right: 10px;
        }
      }
    }
  }

  .infoContainer{
    box-shadow: 0 0 4px #ddd;
    margin-bottom: 20px;

    .workTitle{
      text-align: center;
      padding: 10px 0;
    }

    .infoCon{
      display: flex;
      flex-wrap: wrap;

      .infoItemBox{
        width: 25%;
        padding: 10px;
        box-sizing: border-box;

        .infoItem{
          box-shadow: 0 0 4px #aaa;
          position: relative;

          .imgBox {
            width: 100%;
            height: 300px;
            position: relative;
            .img {
              width: 100%;
              height: 100%;
            }
            .qrcode{
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0.7);
              display: flex;
              justify-content: center;
              align-items: center;

              >img{
                flex: 1
              }
            }
          }

          .coupon{
            background-color: red;
            font-size: 12px;
            padding: 5px 10px;
            position: absolute;
            right: 0;
            top: 10px;
            color: #fff;
            border-radius: 2px;
          }

          .titleTxt{
            padding: 8px;
            font-size: 14px;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .btnBox{
            height: 40px;
            padding: 0 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;

            .buyBtn{
              background-color: red;
              color: #fff;
              padding: 5px 10px;
              border-radius: 4px;
            }

            .price{
              color: orange;
            }
          }
        }
      }

    }
  }


</style>
